@import '../style/common.less';

.@{btnPrefix} {
  display: inline-block;
  font-size: var(--gratify-button-default-font-size);
  padding: 8px 14px;
  text-align: center;
  color: @gratify-default-color;
  background-color: @gratify-default-bg;
  border: 1px solid @gratify-default-border-color;
  border-radius: var(--gratify-button-default-border-radius);
  user-select: none;
  cursor: pointer;
  transition: var(--gratify-all-transition);

  &:hover {
    background-color: @gratify-disabled-bg;
  }

  &-primary {
    color: var(--gratify-default-white-color);
    background-color: var(--gratify-primary-color);
    border: 1px solid var(--gratify-primary-color);

    &:hover {
      background-color: var(--gratify-primary-color-hover);
    }
  }

  &-secondary {
    color: @gratify-default-color;
    background-color: var(--gratify-secondary-color);
    border: 1px solid var(--gratify-secondary-color);

    &:hover {
      background-color: var(--gratify-secondary-color-hover);
    }
  }

  &-warning {
    color: var(--gratify-default-white-color);
    background-color: var(--gratify-warning-color);
    border: 1px solid var(--gratify-warning-color);

    &:hover {
      background-color: var(--gratify-warning-color-hover);
    }
  }

  &-danger {
    color: var(--gratify-default-white-color);
    background-color: var(--gratify-danger-color);
    border: 1px solid var(--gratify-danger-color);

    &:hover {
      background-color: var(--gratify-danger-color-hover);
    }
  }

  &-disabled {
    cursor: no-drop;
    color: @gratify-disabled-color;
    background-color: @gratify-disabled-bg;
    border: 1px solid @gratify-disabled-border-color;
  }
}
